﻿<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebStorage.aspx.cs" Inherits="BugSysSolution.HTML5Info.WebStorage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <div><a href="http://www.w3school.com.cn/html5/html_5_webstorage.asp" style="color:red;">WebStorage</a>
        <p>
            localStorage - 没有时间限制的数据存储</p>
        <p>
            sessionStorage - 针对一个 session 的数据存储</p>
    </div>
    <div id="d1">localStorage:</div>
    <div id="d2">sessionStorage:</div>
    </form>
</body>
</html>
<script type="text/javascript">
    /*
    localStorage  
    他是可读写的
    getItem(key),setItem(key,value),removeItem(key)

    cherome存储的数据是放在浏览器文件夹下面的,后缀是.localstorege，他不属于cookie
    */

    //存储对象
    var details = { name: "xxx", age: 12 };
    window.localStorage.setItem("user", JSON.stringify(details));
    details = JSON.parse(window.localStorage.getItem("user"));
    document.write(details.name);

    //存储值类型
    if (window.localStorage.pagecount) {
        window.localStorage.pagecount = Number(localStorage.pagecount) + 1;
    }
    else {
        window.localStorage.pagecount = 1;
    }
    document.getElementById("d1").innerHTML = "Visits " + window.localStorage.pagecount + " time(s) this session.";

    //遍历window.localStorage 
    var _localStorage = window.localStorage;
    for (var i = 0; i < _localStorage.length; i++) {
        document.write(_localStorage.key(i) + ":" + _localStorage.getItem(_localStorage.key(i)) + "<br/>");
    }
    /*
    sessionStorage
    */
    if (sessionStorage.pagecount) {
        window.sessionStorage.pagecount = Number(sessionStorage.pagecount) + 1;
    }
    else {
        window.sessionStorage.pagecount = 1;
    }
    document.getElementById("d2").innerHTML = "Visits " + window.sessionStorage.pagecount + " time(s) this session.";
</script>
